function fontSize(res) {
  let font_size = window.getComputedStyle(document.documentElement).fontSize.replace('px', '') * 1
  return res * font_size
}

 function initEcharts () {

  //饼形图
  var myChart = echarts.init(document.getElementById('ring'))
  var option = {
    backgroundColor: 'transparent',
    legend: {
      show: false,
      top: '0%',
      left: 'center',
      icon: 'roundRect',
      itemWidth: 8,
      textStyle: {
        fontSize: fontSize(0.68),
      },
    },

    series: [
      {
        type: 'pie',
        radius: '80%',
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderType: 'solid',
          borderColor: '#ffffff',
        },
        emphasis: {
          scale: false,
          scaleSize: 2,
        },
        label: {
          show: true,
          position: 'center',
          lineHeight: 28,
          formatter: function (params) {
            if (params.dataIndex === self.left_index) {
              return '{p|' + params.data.value + '}' + '\n{nm|' + params.data.name + '}'
            } else {
              return ''
            }
          },
          emphasis: {
            formatter: function (params) {
              if (params.dataIndex != self.left_index) {
                return '{p|' + params.data.name + '}' + '\n{nm|' + params.data.value + '}'
              }
            },
          },
          rich: {
            p: {
              width: 130,
              itemWidth: 100,
              color: '#fff',
              fontSize: fontSize(1),
              lineHeight: fontSize(1),
              fontWeight: 'bold',
              //   backgroundColor: "rgba(15, 21, 70, 1)", // 覆盖index=0时的数据
            },
            nm: {
              width: 130,
              itemWidth: 100,
              color: '#fff',
              fontSize: fontSize(1.5),
              lineHeight: fontSize(1.625),
              fontWeight: 'bold',
              //   backgroundColor: "rgba(15, 21, 70, 1)", // 覆盖index=0时的数据
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 64,
            name: '办公建筑',
            itemStyle: {
              color: 'rgba(14,227,247, 0.58)',
            },
          },
          {
            value: 1,
            name: '综合建筑',
            itemStyle: {
              color: 'rgba(255,113,94, 0.58)',
            },
          },
          {
            value: 4,
            name: '商场建筑',
            itemStyle: {
              color: 'rgba(254,  217,  118, 0.64)',
            },
          },
          {
            value: 10,
            name: '宾馆饭店',
            itemStyle: {
              color: 'rgba(234,94,230, 0.64)',
            },
          },
          {
            value: 1,
            name: '医疗卫生',
            itemStyle: {
              color: 'rgba(94, 225, 186, 0.58)',
            },
          },
          {
            value: 1,
            name: '文化教育',
            itemStyle: {
              color: 'rgba(113, 204, 78, 0.58)',
            },
          },
        ],
      },
    ],
  }
  myChart.setOption(option)

  //柱状图
  var myChart2 = echarts.init(document.getElementById('bar'), 'dark')
  var option = {
    backgroundColor: 'transparent',

    tooltip: {
      trigger: 'axis',
      show: true,
      confine: true,
      textStyle: {
        align: 'left',
      },
      formatter: function (item) {
        let html = `${item[0].name}:${item[0].data}`
        item.slice(1).forEach((s) => {
          if (s.seriesName.indexOf('series') == -1) {
            html += `<br/> ${s.seriesName}:${s.data}`
          }
        })
        return html
      },
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'none', // cross 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      show: false,
      top: '5%',
      left: 'center',
      icon: 'roundRect',
      itemWidth: 8,
      textStyle: {
        fontSize: fontSize(0.6875),
      },
    },
    grid: {
      left: '0%',
      right: '0%',
      top: '20%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['办公建筑', '综合建筑', '商场建筑', '宾馆饭店', '医疗卫生', '文化教育'],
      axisTick: {
        alignWithLabel: false,
        show: true,
        lineStyle: {
          color: '#ccc',
        },
      },
      axisLabel: {
        fontSize: fontSize(0.6875),
        interval: 0,
        padding: [10, 0, 0, 0],
      },
      axisLine: {
        lineStyle: {
          color: '#ccc',
        },
      },
      splitLine: {
        show: false,
      },
      show: true,
    },

    yAxis: {
      max: 70,
      name: '栋',
      nameTextStyle: {
        // color: "rgba(217, 35, 35, 1)",
        align: 'right',
        verticalAlign: 'middle',
        borderDashOffset: 0,
        padding: [6, 6, 6, 6],
      },
      axisLabel: {
        // color: '#ff0000',
        fontSize: fontSize(0.6875),
        interval: 0,
        padding: [0, 0, 0, 0],
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#ccc',
        },
      },
      axisTick: {
        alignWithLabel: false,
        show: true,
        lineStyle: {
          color: '#ccc',
        },
      },
    },
    series: [
      {
        name: 'dotted',
        type: 'pictorialBar',
        symbol: 'rect',
        barGap: '-100%',
        showBackground: true,
        itemStyle: {
          color: 'rgba(14,227,247, 1)',
        },
        symbolRepeat: true,
        symbolSize: [12, 4],
        symbolMargin: 1,
        data: [64, 1, 4, 10, 1, 1],
        z: -8,
      },
      {
        type: 'bar',
        itemStyle: {
          color: 'rgba(0,0,0,0.2)',
        },
        barGap: '-100%',
        barWidth: 12,
        z: -9,
        showBackground: true,

        data: [70, 70, 70, 70, 70, 70],
      },
    ],
  }
  myChart2.setOption(option)


  // 折线图
  let myChart3 = echarts.init(document.getElementById('line'), 'dark')
  var option = {
    backgroundColor: 'transparent',

    tooltip: {
      trigger: 'axis',
      show: true,
      confine: true,
      textStyle: {
        align: 'left',
      },
      formatter: function (item) {
        let html = item[0].axisValue * 1 + '月'
        item.slice(0).forEach((s) => {
          if (s.seriesName.indexOf('series') == -1) {
            html += `<br/> ${s.seriesName}:${s.data}%`
          }
        })
        return html
        // return  '{b0}<br/>{a1}: {c1}<br/>{a2}: {c2}'
      },
      // formatter: '{b0}<br/>{a1}: {c1}<br/>{a2}: {c2}',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'none', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      show: true,
      // data:[""]
      top: '0%',
      left: 'center',
      icon: 'circle',
      type: 'scroll',
      itemHeight: fontSize(0.5),
      itemWidth: fontSize(0.5),
      textStyle: {
        fontSize: fontSize(0.6),
      },
    },
    grid: {
      left: '0%',
      right: '0%',
      top: '18%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      axisTick: {
        alignWithLabel: false,
        show: true,
        lineStyle: {
          color: '#ccc',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#ccc',
        },
      },
      axisLabel: {
        //X轴文字样式
        fontSize: fontSize(0.6875),
        interval: 0,
        padding: [10, 0, 0, 0],
      },
      splitLine: {
        show: false,
      },
      show: true,
    },
    yAxis: {
      // max:100,
      type: 'value',
      name: 'kwh',
      axisLabel: {
        fontSize: fontSize(0.6875),
        interval: 0,
        padding: [0, 0, 0, 0],
      },
      nameLocation: 'end',
      nameTextStyle: {
        align: 'right',
        verticalAlign: 'middle',
        borderDashOffset: 0,
        padding: [6, 6, 6, 6],
      },
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: '#ccc',
        },
      },
      axisTick: {
        alignWithLabel: false,
        show: true,
        lineStyle: {
          color: '#ccc',
        },
      },
    },
    series: [
      {
        name: '办公建筑',
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          color: 'rgba(14,227,247,1)',
        },
        barGap: '-100%',
        barWidth: 12,
        z: -8,
        data: [4, 3, 5, 4, 0],
      },
      {
        name: '综合建筑',
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          color: 'rgba(255,113,94, 1)',
        },
        barGap: '-100%',
        barWidth: 12,
        z: -8,
        data: [0.8, 0.6, 1, 0.6, 0],
      },
      {
        name: '商场建筑',
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          color: 'rgba(254,  217,  118, 1)',
        },
        barGap: '-100%',
        barWidth: 12,
        z: -8,
        data: [0.6, 0.5, 0.8, 0.4, 0],
      },
      {
        name: '宾馆饭店',
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          color: 'rgba(234,94,230, 1)',
        },
        barGap: '-100%',
        barWidth: 12,
        z: -8,
        data: [],
      },
      {
        name: '医疗卫生',
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          color: 'rgba(94, 225, 186, 1)',
        },
        barGap: '-100%',
        barWidth: 12,
        z: -8,
        data: [1,1,1],
      },
      {
        name: '文化教育',
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          color: 'rgba(113, 204, 78, 1)',
        },
        barGap: '-100%',
        barWidth: 12,
        z: -8,
        data: [1,2,1,1,2],
      },
      {
        type: 'bar',
        itemStyle: {
          color: 'rgba(0,0,0,0.2)',
        },
        barGap: '-100%',
        barWidth: 12,
        z: -9,
        showBackground: true,
        data: [7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
      },
    ],
  }
  myChart3.setOption(option)
}
